Collection View Layouts

  • The CollectionViewLayout class is an abstract base class that you subclass and use to generate layout information for a collection view. The job of a layout object is to determine the placement of cells, supplementary views inside the collection view’s bounds and to report that information to the collection view when asked. The collection view then applies the provided layout information to the corresponding views so that they can be presented onscreen.

    See more

    Declaration

    Swift

    open class CollectionViewLayout : NSObject

  • An UICollectionViewLayoutAttributes object manages the layout-related attributes for a given item in a collection view. Layout objects create instances of this class when asked to do so by the collection view. In turn, the collection view uses the layout information to position cells and supplementary views inside its bounds.

    See more

    Declaration

    Swift

    public class CollectionViewLayoutAttributes : CustomStringConvertible

  • This layout is column based which means you provide the number of columns and cells are placed in the appropriate one. It can be display items all the same size or as a Pinterest style layout.

    The number of columns can be set dynamically by the delegate or you can provide a default value using layout.columnCount.

    You can also set the sectionInsets and minimumColumnSpacing which will affect the width of each column.

    With the itemWidth set by the column, you have 3 options to set the height of each item. They are used in the order here. So if aspectRatioForItemAtIndexPath is implemented it is used, otherwise, it checks the next one.

    1. aspectRatioForItemAtIndexPath (delegate)
    2. heightForItemAtIndexPath (delegate)
    3. layout.defaultItemHeight

    The delegate method aspectRatioForItemAtIndexPath scales the size of the cell to maintain that ratio while fitting within the caclulated column width.

    Mixed use of ratios and heights is also supported. Returning CGSize.zero for a ratio will fall back to the hight. If a valid ratio and height are provided, the height will be appended to the height to respect the ratio. For example, if the column width comes out to 100, a ratio of 2 will determine a height of 200. If a height is also provided by the delegate for the same item, say 20 it will be added, totalling 220.

    See more

    Declaration

    Swift

    open class CollectionViewColumnLayout : CollectionViewLayout

  • The delegate for CollectionViewColumnLayout to dynamically customize the layout

    See more

    Declaration

    Swift

    @objc
public protocol CollectionViewDelegateColumnLayout : CollectionViewDelegate

  • A variation of UICollectionViewFlowLayout

    This layout is primarily row based, but uses ItemStyles to group similar items together.

    The layout’s delegate, CollectionViewDelegateFlowLayout, is responsible for providing a style for each item in the collection view.

    Flow items are grouped together, always placing as many same height items in each row as possible. If the row becomes full or an flow item of a different height is provided, the layout will just to the next row and continue.

    Span items are always placed an their own row and fill the width of the Collection View.

    Example

    +---------------------------------+
|   +-----+ +------------+ +--+   |
|   |  1  | |     2      | | 3|   |
|   |     | |            | |  |   |
|   +-----+ +------------+ +--+   |
|   +--------+ +---------+        |
|   |   4    | |   5     |        |
|   |        | |         |        |
|   |        | |         |        |
|   |        | |         |        |
|   +--------+ +---------+        |
|   +-------------------------+   |
|   |         6. Span         |   |
|   +-------------------------+   |
+---------------------------------+

    Transformations

    Transformations allow you to adjust the content of each row before moving on to the next row.

    The center transformation will shift the of the row to be center aligned rather than left aligned.

    The fill tranformation will enlarge the items in a row proportionally to fill the row if their is empty space on the right. Note that this will affect the height of the entire row.

    Spacing

    Spacing options such as interspanSpacing and spanGroupSpacingBefore allow you to customize the space around different types of style groups.

    The spanGroupSpacingBefore/After options will apply a set amount of space before or after a group of span items (one or more spans).

    See more

    Declaration

    Swift

    open class CollectionViewFlowLayout : CollectionViewLayout

  • CollectionViewDelegateFlowLayout

    See more

    Declaration

    Swift

    public protocol CollectionViewDelegateFlowLayout